<template>
  <div>
    <el-container style="height:700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: white;">威海环海自驾汽车租凭管理系统</el-header>
      <el-container>
        <el-aside width="230px" style="border: 1px solid #eee">
          <el-menu :default-openeds="['1', '3']">

            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>客户信息</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <router-link :to="{ path: '/client/clientPersonal', query: { userAcct: $route.query.userAcct } }">个人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link :to="{ path: '/client/clientAcct', query: { userAcct: $route.query.userAcct } }">客户账户</router-link>
                </el-menu-item>
                <el-menu-item index="1-3">
                  <router-link :to="{ path: '/client/leaseInfo', query: { userAcct: $route.query.userAcct } }">租凭登记信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-4">
                  <router-link :to="{ path: '/client/returnInfo', query: { userAcct: $route.query.userAcct } }">租凭归还信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-5">
                  <router-link :to="{ path: '/client/rechargeInfo', query: { userAcct: $route.query.userAcct } }">充值信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-6">
                  <router-link :to="{ path: '/client/deductInfo', query: { userAcct: $route.query.userAcct } }">扣款信息</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title"><i class="el-icon-s-goods"></i>交易模块</template>
              <el-menu-item-group>
                <el-menu-item index="2-1">
                  <router-link :to="{ path: '/client/carlease', query: { userAcct: $route.query.userAcct } }">汽车租凭</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

          </el-menu>
        </el-aside>

        <el-main>

          <!-- 隐藏的编辑对话框 -->
          <el-dialog title="编辑客户信息" :visible.sync="dialogVisible">
            <el-form :model="editForm" label-width="100px">
              <el-form-item label="客户编号">
                <el-input v-model="editForm.clientID" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="客户姓名">
                <el-input v-model="editForm.clientName"></el-input>
              </el-form-item>
              <el-form-item label="身份证号">
                <el-input v-model="editForm.clientCard"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="editForm.gender">
                  <el-radio label="男" :checked="editForm.gender === '男'">男</el-radio>
                  <el-radio label="女" :checked="editForm.gender === '女'">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="电话">
                <el-input v-model="editForm.phone"></el-input>
              </el-form-item>
              <el-form-item label="住址">
                <el-input v-model="editForm.address"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="handleEdit">确定</el-button>
              <el-button @click="dialogVisible = false">取消</el-button>
            </div>
          </el-dialog>

          <!-- 修改密码对话框 -->
          <el-dialog title="修改密码" :visible.sync="pwdDialogVisible">
            <el-form>
              <el-form-item label="新密码">
                <el-input v-model="newPwd" type="password"></el-input>
              </el-form-item>
              <el-form-item label="确认密码">
                <el-input v-model="confirmNewPwd" type="password"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="handlePwdDialogConfirm">确定</el-button>
              <el-button @click="pwdDialogVisible = false">取消</el-button>
            </div>
          </el-dialog>

          <!-- 表格 -->
          <el-table :data="tableData" border>
            <el-table-column prop="clientID" label="客户编号" width="auto"></el-table-column>
            <el-table-column prop="clientName" label="客户姓名" width="auto"></el-table-column>
            <el-table-column prop="clientCard" label="身份证号" width="auto"></el-table-column>
            <el-table-column prop="gender" label="性别" width="auto"></el-table-column>
            <el-table-column prop="phone" label="电话" width="auto"></el-table-column>
            <el-table-column prop="address" label="住址" width="auto"></el-table-column>
            <el-table-column label="操作" v-slot="scope">
              <el-button type="primary" size="mini" @click="handleEditClick(scope.row)">编辑</el-button>
              <el-button type="warning" size="mini" @click="handleChangePwdClick(scope.row)">修改密码</el-button>
            </el-table-column>
          </el-table>

          <br><br>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false, // 对话框是否可见
      editForm: {           // 要编辑的客户信息
        clientID: '',
        clientName: '',
        clientCard: '',
        gender: '',
        phone: '',
        address: ''
      },
      pwdDialogVisible: false, // 修改密码对话框是否可见
      newPwd: '',
      confirmNewPwd: '',
    }
  },
  methods: {
    handleEditClick(row) {
      console.log(row);
      this.editForm = { ...row };
      this.dialogVisible = true;
    },
    handleEdit() {
      const data = {
        clientID: this.editForm.clientID,
        clientName: this.editForm.clientName,
        clientCard: this.editForm.clientCard,
        gender: this.editForm.gender,
        phone: this.editForm.phone,
        address: this.editForm.address
      };
      axios.post('http://localhost:8081/clientInfo/update', data)
          .then(response => {
            console.log(response);
            this.$message.success('编辑成功');
            this.dialogVisible = false;
            // 更新成功后，重新获取数据刷新表格
            this.getTableData();
          })
          .catch(error => {
            console.log(error);
          });
    },
    handleChangePwdClick(row) {
      console.log(row);
      this.newPwd = '';
      this.confirmNewPwd = '';
      this.pwdDialogVisible = true;
    },
    handlePwdDialogConfirm() {
      if (this.newPwd !== this.confirmNewPwd) {
        this.$message.error('两次输入的密码不一致');
        return;
      }
      const data = {
        clientAcct: this.$route.query.userAcct,
        clientPwd: this.newPwd,
        clientID: this.$route.query.userAcct
      };
      axios.post('http://localhost:8081/clientlogin/update', data)
          .then(response => {
            console.log(response);
            this.$message.success('密码修改成功');
            this.pwdDialogVisible = false;
          })
          .catch(error => {
            console.log(error);
            this.$message.error('密码修改失败');
          });
    },
    // 获取客户信息的数据并刷新表格
    getTableData() {
      axios.get("http://localhost:8081/clientInfo/select1?clientID=" + this.$route.query.userAcct).then((result) => {
        this.tableData = result.data.data;
      });
    },
  },
  mounted() {
    axios.get("http://localhost:8081/clientInfo/select1?clientID=" + this.$route.query.userAcct).then((result) => {
      this.tableData = result.data.data;
    });
  },

}
</script>

<style>

</style>